<template>
    <component v-if="!route单项.hidden" :is="chooseComponent" :trueItem="route单项" :initLevel="initLevel">
        <template v-if="route单项.children && route单项.children.length !== 0">
            <a菜单项 v-for="item in route单项.children" :route单项="item" :initLevel="initLevel + 0.3" />
        </template>
    </component>
</template>

<script setup>
import ItemSingle from './ItemSingle.vue'
import ItemMultiple from './ItemMultiple.vue'
import { computed, toRefs } from 'vue';
// defineOptions({
//   name: 'a菜单项',
// })
const props = defineProps({
    route单项: {
        default: function () {
            return {}
        },
        type: Object,
    },
    initLevel: {
        type: Number,
        default: 0,
    },
})
const { route单项, initLevel } = toRefs(props)

const chooseComponent = computed(() => {
    if (route单项.value.children && route单项.value.children.length !== 0) {
        return ItemMultiple
    } else {
        return ItemSingle
    }
})
</script>